<template>
<div class="app">
    <div class="box">
        <el-form ref="form" :rules="chackform" class="form-box" :model="form" label-width="80px">
            <img src="../assets/img/logo_index.png" alt="">
              <el-form-item style="margin-left:-80px" prop="phone">
                 <el-input v-model="form.mobile"  placeholder="请输入手机号"></el-input>
              </el-form-item>

              <div class="code">

                 <el-form-item style="margin-left:-80px" prop="pass">
                 <el-input v-model="form.code" class="left-i" placeholder="请输入密码"></el-input>
                   </el-form-item>
                 <el-form-item style="margin-left:-80px" >
                   <el-button class="right-r">发送激活码</el-button>
              </el-form-item>
                <!-- <el-button>发送激活码</el-button> -->

            </div>
            <div class="xybox">
                <el-form-item style="margin-left:-80px;" prop="chack">
               <el-checkbox v-model="form.checked"></el-checkbox>
               <span class="xieyi">我已阅读并同意用户协议和隐私条款</span>
               </el-form-item>
            </div>
        <el-button class="btn" @click="chackinp(form)" type="primary">登录</el-button>
        </el-form>
    </div>

</div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        mobile: '',
        code: '',
        checked: false
      },
      chackform: {
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号' }
        ],
        chack: [
          { required: true, message: '请同意用户协议' }
        ]
      }
    }
  },
  methods: {
    chackinp (form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // console.log(this.$refs.form)
    },
    resetForm (form) {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang='less' scoped>
.app{

    height: 100%;
    position: absolute;
    width: 100%;
     display: flex;
     justify-content: center;
    align-items: center;
    background:url('../assets/img/login_bg.jpg');
    background-size: cover;
    .box{

        .form-box{
          img{
            width: 230px;
            margin: 30px;
          }
            width: 85%;
            margin: 0 auto;
        }
        margin: 0 auto;
        width: 50%;

        .code{
            margin-top: 18px;
            display: flex;
            justify-content: space-between;
            margin-bottom: -10px;
        }
        .left-i{
            display: inline-block;
            width: 350px;
            margin-right: 18px;
        }
        .btn{
            // margin-top: -18px;
            width: 100%;
        }
      .xybox{
        span{
          margin-left: 10px;
          font-size: 14px;
        }
        text-align: left;
        // margin-top: 18px;
      }
        width: 580px;
        height: 360px;
        background: #fff;

    }
}
</style>
